<template>
  <div>
    <cus-modal
      ref="modal"
      :title="form.materialName + ' - 营养详情'"
      @on-visible-change="onVisibleChange"
      width="970"
      @onOk="onOk"
      :showOkBtn="false"
      cancelBtnName="关闭"
    >
      <Spin fix v-if="loading"></Spin>
      <Form ref="formValidate" :model="form">
        <FormItem label="营养名称:" prop="nutritionName">
          <Input v-model="form.nutritionName" style="width: 150px" clearable maxlength="20"> </Input>
        </FormItem>
        <FormItem label="物料编号:" prop="materialCode">
          <Input v-model="form.materialCode" style="width: 150px" clearable maxlength="20"> </Input>
        </FormItem>
        <FormItem label="蛋白质:" prop="protein">
          <Input v-model="form.protein" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">克</span>
          </Input>
        </FormItem>
        <FormItem label="能量:" prop="energy">
          <Input v-model="form.energy" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">千卡</span>
          </Input>
        </FormItem>
        <FormItem label="脂肪:" prop="fat">
          <Input v-model="form.fat" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">克</span>
          </Input>
        </FormItem>
        <FormItem label="碳水化合物:" prop="carbohydrate">
          <Input v-model="form.carbohydrate" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">克</span>
          </Input>
        </FormItem>
        <FormItem label="维生素A:" prop="va">
          <Input v-model="form.va" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">微克</span>
          </Input>
        </FormItem>
        <FormItem label="维生素E:" prop="ve">
          <Input v-model="form.ve" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">毫克</span>
          </Input>
        </FormItem>
        <FormItem label="维生素C:" prop="vc">
          <Input v-model="form.vc" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">微克</span>
          </Input>
        </FormItem>
        <FormItem label="维生素B1:" prop="vb1">
          <Input v-model="form.vb1" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">微克</span>
          </Input>
        </FormItem>
        <FormItem label="维生素B2:" prop="vb2">
          <Input v-model="form.vb2" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">微克</span>
          </Input>
        </FormItem>
        <FormItem label="维pp:" prop="vpp">
          <Input v-model="form.vpp" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">微克</span>
          </Input>
        </FormItem>
        <FormItem label="钙:" prop="calcium">
          <Input v-model="form.calcium" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">毫克</span>
          </Input>
        </FormItem>
        <FormItem label="铁:" prop="iron">
          <Input v-model="form.iron" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">毫克</span>
          </Input>
        </FormItem>
        <FormItem label="锌:" prop="zinc">
          <Input v-model="form.zinc" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">毫克</span>
          </Input>
        </FormItem>
        <FormItem label="硒:" prop="selenium">
          <Input v-model="form.selenium" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">毫克</span>
          </Input>
        </FormItem>
        <FormItem label="膳食纤维:" prop="dietaryFiber">
          <Input v-model="form.dietaryFiber" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">克</span>
          </Input>
        </FormItem>
        <FormItem label="胆固醇:" prop="cholesterol">
          <Input v-model="form.cholesterol" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">毫克</span>
          </Input>
        </FormItem>
        <FormItem label="水分:" prop="water">
          <Input v-model="form.water" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">克</span>
          </Input>
        </FormItem>
        <FormItem label="可食部分比:" prop="eatable">
          <Input v-model="form.eatable" style="width: 150px" clearable maxlength="20">
            <span slot="append" style="display: block; width: 30px">%</span>
          </Input>
        </FormItem>
      </Form>
    </cus-modal>
  </div>
</template>

<script>
import { selectFoodNutritionDtl } from "@/api/organ/dishesModule";

const form = {
  materialId: "",
  materialName: "",
};

export default {
  data() {
    return {
      form: form,
      loading: false,
    };
  },
  mounted() {
    this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      if (!v) {
        this.$refs["formValidate"].resetFields();
        this.form = this.$cu.deepClone(form);
      }
    },
    show() {
      this.$refs["modal"].show = true;
      this.selectFoodNutritionDtlApi();
    },
    onOk() {},
    // 获取食材种类
    selectFoodNutritionDtlApi() {
      this.loading = true;
      return new Promise((resolve) => {
        selectFoodNutritionDtl({
          materialId: this.form.materialId,
        }).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            if (res.data) {
              for (const key in res.data) {
                if (
                  key != "materialName" &&
                  key != "materialId" &&
                  key != "nutritionName" &&
                  key != "eatable"
                ) {
                  res.data[key] = res.data[key];
                }
              }
              this.form = Object.assign({}, res.data, this.form);
            }
            resolve();
          }
        });
      });
    },
  },
};
</script>

<style scoped>
/deep/.ivu-select-multiple .ivu-select-selection .ivu-select-placeholder {
  /* height: 40px !important; */
  height: auto !important;
  line-height: 40px !important;
}
/deep/.ivu-select-selection {
  height: auto !important;
  min-height: 40px !important;
  border-radius: 2px !important;
}
</style>

<style scoped lang="less">
.permission {
  height: 300px;
  width: 500px;
  border: 1px solid #dcdee2;
  overflow-y: auto;
  border-radius: 2px;
  padding: 0 0 0 10px;
}
</style>
